<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        html,body {
            margin: 0;
            height: 100%;
        }
        body>.el-container{
            height: 100%
        }
        .menu {
            height: 100%;
        }
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }
        .el-radio-group {
            display: inline-block;
            line-height: 1;
            vertical-align: middle;
            font-size: 0;
        }
        html, body, #app {

            /*统一设置高度为100%*/
            height: 100% !important;
        }


        .index {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .el-container {
            width: 100%;
            min-height: 100vh!important;
            display: flex;
            flex-direction: column;
            justify-content:space-between;
        }
        .el-main {
            height: 100%;
            overflow: hidden;
        }
        .el-footer {
            display: flex;
            height: 4vh;
            width: 100%;
            align-items: center !important;
            text-align: center;
            justify-content: center;
        }
        .el-pagination {
            text-align: center !important;
        }

    </style>
</head>
<body>
<div id="app" class="index">
    <el-container direction="vertical" style="margin: 0px !important;height: 100vh">
        <el-header height="initial" style="background: #fff;">
            <el-row align="middle" type="flex" style="background: #fff; ">
                <el-col :span="24">
                    <el-form label-position="right" :inline="true" style="padding-top: 10px; //内边距"  :model="roleSearch" class="demo-form-inline" size="mini">
                        <el-form-item label="污染源名称" >
                            <el-input v-model="roleSearch.psName"  placeholder="污染源名称" clearable ></el-input>
                        </el-form-item>
                        <el-form-item label="监控点名称">
                            <el-input v-model="roleSearch.pointName" placeholder="监控点名称" clearable></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="loadTable();" >查询</el-button>
                            <el-button type="warning" icon="el-icon-printer" @click="exportExcel()" >导出</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-header>
<main style="background-color: white;height: calc(100vh - 110px)  !important;">
            <template>
                <el-table
                        stripe
                        height="100%"
                        :data="tableData"
                        border
                        size="small"
                        :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"
                        style="width: 100%;font-size: 12px">
                    <el-table-column type="index" width="50">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{rows * (currentPage - 1) + (scope.$index + 1)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="角色名" > </el-table-column>
                    <el-table-column prop="flag"  label="是否可用">
                        <template slot-scope="scope">
                            <span v-if="scope.row.flag == 0">否</span>
                            <span v-if="scope.row.flag == 1">是</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" > </el-table-column>
                    <el-table-column
                            label="创建日期"
                            :formatter="createTimeFormatter">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    type="primary"
                                    size="mini"
                                    @click="openWin(scope.$index, scope.row)">绑定菜单</el-button>
                            <el-button
                                    type="success"
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </template>
</main>
        <el-footer style="background: #fff !important;">
            <!--分页-->

                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[50, 100, 200, 400]"
                        :page-size="rows"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>

        </el-footer>
    </el-container>

    <el-dialog
            title="角色菜单绑定" :visible.sync="dialogVisible" width="90%" top="50px"   :before-close="handleClose">
        <iframe   id="toRoleMenu"  scrolling="yes" width='100%'  height="580px"  :src="iframeSrc" frameborder='0' seamless></iframe>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
</div>
</body>

<script type="text/javascript" th:src="@{/js/json2.js}"></script>
<script th:src="@{/js/vue.js}"></script> <!--vue要放在element ui前面-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script th:src="@{/js/layer.js}"></script>
<script language='javascript' th:inline="javascript">
    let id = 1000;
    new Vue({
        el: '#app',
        data: function () {
            const data = [];
            return {
                iframeSrc:'',
                dialogVisible: false, //弹出框
                roleSearch:{},
                tableData: [],
                currentPage: 1,
                search: '',
                rows :50,
                total:0,
            }
        },
        created() {
        this.init()
        },
        methods: {
            onSubmit(){
                // console.log('----')
               // var a =  document.getElementById('toRoleMenu').contentWindow;
                //调用子页面的方法.
                var a = $("#toRoleMenu")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。  []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。
                a.hehe();  //调用子页面中的subFunction方法。

                // console.log('a',a)
            },
            handleClose(){
                this.dialogVisible = false;
            },
           openWin(index, row) {
                // console.log(row.id)
               // $(c).attr("src","/role/toRoleMenuBind/"+row.id);
               this.iframeSrc = "/role/toRoleMenuBind/"+row.id
            /*     var url = "/toActPage"
                layer.open({
                    type: 2,
                    title: "信息修改1",
                    offset:80,
                    moveOut:true,
                    move:'.layui-layer-title',
                    content: url,
                    // move: true,
                    area: ["90%","80%"],
                // zIndex: top.layer.zIndex + 1, //多窗口模式，层叠打开
               /!* /!*btn: ['按钮1', '按钮2'],
                'btn1'(index,layout){
                    alert('11')
                },*!/!*!/
                success: function (layero,index) {
                    // layer.iframeAuto(index); 宽度自定义
                    // window.location.href = _ctx + "/bas/psinfoRegist/form/" + id;
                    top.layer.setTop(layero);
                }, cancel: function () {
                    // 右上角关闭事件的逻辑
                    // layer.close(index);
                        layer.closeAll();
                }
            });*/
                this.dialogVisible = true;
            },
            handleSizeChange(val) {
                // console.log('val',val); //当前显示行数
                this.rows =val
                this.init()
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val
                this.init()
            },
            init(){
                _this = this
                $.get("/role/getAllRole/"+this.currentPage+"/"+this.rows, {}, function(msg) {
                    // console.log(msg)
                    _this.tableData = msg.data.list
                    _this.total = msg.data.total
                    // _this.data = msg.data
                })
            },
            createTimeFormatter(val){
                return this.TimeToStrDate(val.createDate);
            },
            // 时间戳转yy-MM-dd HH:mm:ss
            TimeToStrDate(time) {
                var dd = new Date(time); // 13位时间戳
                var y = dd.getFullYear();
                var m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1);//获取当前月份的日期，不足10补0
                var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0
                var h = dd.getHours() < 10 ? '0' + dd.getHours() : dd.getHours();
                var n = dd.getMinutes() <10 ? '0' + dd.getMinutes() : dd.getMinutes();
                var s = dd.getSeconds() <10 ? '0' + dd.getSeconds() : dd.getSeconds();
                return y + '-' + m + '-' + d + ' ' + h + ':' + n + ':' + s;
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                _this =this
                // console.log('删除',index, row);
                axios({
                    url: "/role/delRole/"+row.id,
                    data: '',
                    method: 'post',
                    contentType: "application/json",
                }).then(res => {
                    var type = res.data.code==20000?'success':'error'
                    this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: type
                    });
                    _this.init()
                })
            },
            loadTable(){},
            exportExcel(){}
        }
    })
</script>

</html>